import React from 'react';

import styled from 'styled-components';
import { SingleBar } from '@/components/Chart/Bar';

const ColCeilC = styled.table`
  width: 100%;
  td, th {
    border: 1px solid var(--ceil-border);
    padding: 5px 14px;
    height: 55px;
  }
  th {
    color: var(--ceil-header);
    font-size: 14px;
    font-weight: 500;
  }
  tr {
    th {
      background: #FAFAFA;
      font-weight:500;
      color: #444;
      font-size:16px;
    }
    td {
      font-size:14px;
      font-weight:500;
      color: #666;
    }
  }
  td {
    color: var(--ceil-content);
    font-size: 14px;
    font-weight: 500;
  }

  thead th {
    background: #FAFAFA;
    font-weight:500;
    color:rgba(68,68,68,1);
    font-size:16px;
  }

  @media print {
    thead tr th {
      color: #000;
      background: #fff !important;
      font-family: 'STSong', 'SimSun';
    }
  }
`

const Chartd = styled.td`
  @media print {
    display: none;
  }
`

export default class MsgCeil extends React.Component<any> {

  render() {

    const { last, task } = this.props;
    task && SingleBar({
      ref: this.refs.barRef,
      title: `环比柱状图`,
      nameX: '数量',
      nameY: '时间',
      dataX: [last && last.startTime ? last.startTime.slice(0, 7) : '/', task && task.startTime ? task.startTime.slice(0, 7) : '/'],
      dataY: [last ? last.total : 0, task ? task.total : 0],
      dataYAfter: [last && !isNaN(last.total) && !isNaN(last.count) ? last.total - last.count : 0,
      task && !isNaN(task.total) && !isNaN(task.count) ? task.total - task.count : 0],
      legend: ['总数', '完好数'],
      color: '#49a1ff',
      barWidth: 15,
      gap: [0, 0]
    })


    return (
      <ColCeilC style={{ marginTop: '50px' }}>
        <thead>
          <tr><th colSpan={6} style={{ fontSize: '18px' }}>检查基本情况</th></tr>
        </thead>
        <tbody>
          <tr>
            <Chartd rowSpan={3} style={{ width: '310px', 'height': '200px' }}>
              <div ref="barRef" style={{ height: '90%', width: '90%' }}></div>
            </Chartd>
            <td>月份</td>
            <td>总数</td>
            <td>完好数</td>
            <td>隐患数</td>
            <td>完好率</td>
          </tr>
          <tr>
            <td>{last && last.startTime ? last.startTime.slice(0, 7) : '/'}</td>
            <td>{last ? last.total : '0' || '0'}</td>
            <td>{last ? (last.total - last.count) : '0' || '0'}</td>
            <td>{last ? last.count : '0' || '0'}</td>
            <td>{last && !isNaN(last.rate) ? `${(last.rate) || 0}%` : '0%' || '0%'}</td>
          </tr>
          <tr>
            <td>{task && task.startTime ? task.startTime.slice(0, 7) : ''}</td>
            <td>{task ? task.total : '0' || '0'}</td>
            <td>{task && !isNaN(task.total) && !isNaN(task.count) ? (task.total - task.count) : '0' || '0'}</td>
            <td>{task ? task.count : '0' || '0'}</td>
            <td>{task && !isNaN(task.rate) ? `${(task.rate) || 0}%` : '0%' || '0%'}</td>
          </tr>
        </tbody>
      </ColCeilC>
    )
  }
}
